<html>

<head>
    <title>talk chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js"></script>
</head>

<body style="margin: 0">
    <div style="top:0px; position: fixed; width: 100%; height: 70px; background-color: #000232"></div>
    <div style="position: relative; margin:80px auto 0 auto; background-color: blueviolet; width: 500px; height: 800px">
        <div id="content" style="position: absolute;left:2px; top: 2px; background-color: #ffffff; width: 496px; height: 796px">
            <div style="width: 100%; height: 40px; background: gray; text-align: center; line-height: 40px;">
                ****聊天框
            </div>
            <div id="talkContent" style="overflow: auto; height: 636px">
                <div style="float: left; margin-top: 3px; margin-left: 5px; color: greenyellow; width: 100%;">
                    <p>2017-10-11 12:34:35</p>
                    <p>*********
                    *********
                    *********
                    *********
                    *********
                    *********
                    *********
                </p>

                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    <p>*********</p>
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    *********
                </div>
                <div style="float: right; margin-top: 3px; margin-right: 5px; text-align: right; color: greenyellow; width: 100%">
                    <p>2017-10-11 12:34:35</p>
                    ********
                </div>
            </div>
            <div id="inout" style="height: 120px; border-top-color: gainsboro; border-top-width: 3px; border-top-style: solid">
                <div id="title" style="height: 45px; background-color:beige">

                </div>
                <div style="margin: 0; width: 100%">
                    <div tabindex="0" contenteditable="true" style="outline: none;overflow: auto;padding-left:3px; padding-top:1px; margin:0; float: left; height: 72px; width: 390px; font-size: 16px; text-align: left;">
                    </div>
                    <div id="send" style="background-color: gray;float:right; width: 100px; height: 72px; line-height: 72px; text-align: center">
                        Send
                    </div>
                    <div style="clear: both;"></div>
                </div>
               
            </div>

        </div>

    </div>
</body>

<script>
    var st = io.connect('127.0.0.1:5000');
    st.on('news', function (data) {
	    console.log(data);
	    socket.emit('my other event', { my: 'data' });
  });
</script>

</html>